//el element缩写 
// option   选项  后期加一些插件配置
function Tab(el,option){
    this.el = document.querySelector(el)
    // 调用自定义原型上的方法 ==>自己写
    this.init()
}
Tab.prototype.init = function(){
// 添加功能（方便添加其他功能）
// init中调用原型上的titleOver方法
this.titleOver()
}

// 自定义titleOver方法
Tab.prototype.titleOver = function(){
    // document.querySelectorAll('.wrap .top .ul li') //此时获取的是new两遍的li，应该用el
    // 获取当前操作的table选项卡中的顶部的所有li标签
    let liObjs = this.el.querySelectorAll('.top ul li')
    // console.log(liObjs);
    // 遍历  
    liObjs.forEach((item,i)=>{
        // （此处使用箭头函数为了改变事件中的this的指向）
        item.onmouseover = () => { 
            // 清除当前的active的className类名
            this.el.querySelector('.wrap .top ul li.active').className = ''
            // 给当前操作的li增加className类名
            item.className = 'active'

            // 同步内容(注意this和箭头函数的搭配使用)（也可以单独封装一个函数）
            this.el.querySelector('.wrap .bottom ul li.active').className = ''
            let bliobjs = this.el.querySelectorAll('.wrap .bottom ul li')
            bliobjs[i].className = 'active'
        }
    })
}
